<title>Live Preview</title>

<style>
body{
background: #00181D;
color: white;
font:12px calibri, tahoma, consolas;
}
.result-cgi{
WIDTH: 100%;
border: 1px solid #356769;
height: 315px;
background: white;
}
.result-code{
margin: 2px;
min-height: 180px;
min-width: 100%;
max-width: 100%;
background-color: #1C272B;
border: 1px solid #008565;
font: 12px consolas, lucida console, monospace, courier new, calibri;
color: white;
}
.tombolkecil {
border: none;
background: #00425C;
color: white;
padding: 2px 20px;
border-radius: 3px;
width: 90px;
margin: 2px 5px;
}
input:disabled, isindex:disabled, textarea:disabled {
color: #545454;
background: #444;
}
.confirm{
background: #7A0000;
display: inline-block;
padding: 0 5px 0 0;
border-radius: 3px;
}
</style>


<iframe class="result-cgi" frameborder="0" name="preview" src="about:blank"></iframe>

<form id="form" method="post" name="form1">
<span>Coding:</span>
<textarea class="result-code" name="code" placeholder="Tulis/paste kode di sini lalu klik 'Preview' Dan hapus kode/reset kotak ini dengan mencentang kotak dialog lalu klik 'Hapus'"></textarea>


</form>
<input class="tombolkecil" onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus();" type="button" id="preview" value="Preview" />
<form name="hapussaja" class="confirm">
<input class="tombolkecil" name="hapus" disabled onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close (); preview.focus(); " title="Tolong Checklist kotak disamping sebagai persetujuan." type="button" value="Delete" />
<input type="checkbox" name="setuju" onchange="enable()" title="Persetujuan tombol penghapusan, agar anda tidak salah klik tombol."> Saya akan menghapus kode/Reset kotak editor diatas.
</form>
<script>
function undisable() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    }


</script>

<script language="Javascript" type="text/javascript">
 function enable(){
  if (document.hapussaja.setuju.checked==''){
   document.hapussaja.hapus.disabled=true;
   document.hapussaja.hapus.title = "Tolong Checklist kotak disamping sebagai persetujuan."
  }else{
   document.hapussaja.hapus.disabled=false
   document.hapussaja.hapus.title = "Tombol Aktif, saya sarankan disable tombol ini ketika proses pengeditan."
  }
 }
</script>
